<template>
  <!-- 预算 弹出框 -->
  <a-modal :closable="false" :visible="budgetVisible" :footer="null" width="60%">
    <div class="budget_content">
      <dl>
        <dt>预算模式:</dt>
        <dd>
          <a-tabs type="card" default-active-key="1" @change="changeTab">
            <a-tab-pane key="1" tab="单一设定">
              <DailyBudgetComponent :submitForm="submitForm"></DailyBudgetComponent>
              <div class="update_btn_box">
                <a-button @click="singleSetCancle">取消</a-button>
                <a-button type="primary" @click="singleSetConfirm">确认修改</a-button>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="七日计划">
              <CalendarComponent
                @cancel="calendarCancel"
                @confirm="calendarConfirm"
                :dateDictory="dateDictory"
              ></CalendarComponent>
            </a-tab-pane>
          </a-tabs>
          <div class="seven_tip" v-if="currentTab == '2'">！ 7日预算计划进行中，如选择单一设定则计划终止</div>
        </dd>
      </dl>
    </div>
  </a-modal>
</template>

<script>
import DailyBudgetComponent from './DailyBudgetComponent'
import CalendarComponent from './CalendarComponent'
export default {
  name: 'BudgetModal',
  data () {
    return {
      submitForm: {
        // 单一设定的form表单信息
        dailyBudget: undefined, // 普通日预算
        rise: false, // 高峰日预算
        peakDayRange: undefined, // 幅度
        isRise: false, // 上涨
        onOff: false // 按流量分配
      },
      dateDictory: {
        // 日期字典
        1: { dailyBudget: 12, peakDayRange: 33, rise: false, isRise: false, onOff: false, isSetBudgetDate: false },
        2: { dailyBudget: 12, peakDayRange: 33, rise: false, isRise: false, onOff: false, isSetBudgetDate: false },
        8: { dailyBudget: 12, peakDayRange: 33, rise: false, isRise: false, onOff: false, isSetBudgetDate: false },
        10: { dailyBudget: 12, peakDayRange: 33, rise: false, isRise: false, onOff: false, isSetBudgetDate: false },
        15: { dailyBudget: 12, peakDayRange: 33, rise: false, isRise: false, onOff: false, isSetBudgetDate: false },
        20: { dailyBudget: 12, peakDayRange: 33, rise: false, isRise: false, onOff: false, isSetBudgetDate: false }
      },
      budgetVisible: false, // 日预算弹出框
      currentTab: '1'
    }
  },
  created () {
    this.submitForm = JSON.parse(JSON.stringify(this.submitForm))
  },
  methods: {
    // tab 标签页的切换
    changeTab (key) {
      this.currentTab = key
    },
    // 单一设定 的取消
    singleSetCancle () {
      this.budgetVisible = false
    },
    // 单一设定 的确认
    singleSetConfirm () {
      this.budgetVisible = false
      console.log(this.submitForm, 'submitForm__单一设定')
    },
    // 日历 的取消
    calendarCancel (res) {
      this.budgetVisible = res.budgetVisible
    },
    // 日历 确认
    calendarConfirm (res) {
      console.log(res, 'res--vb')
      this.budgetVisible = res.budgetVisible
      // 接受 子组件传递过来 最新的字典数据 修改父组件当前的字典数据
      this.dateDictory = res.dateDictory
    }
  },
  components: {
    CalendarComponent,
    DailyBudgetComponent
  }
}
</script>

<style lang="less" scoped>
.budget_content {
  dl {
    display: flex;
    dt {
      padding-top: 2%;
      flex: 1;
    }
    dd {
      position: relative;
      flex: 12;
      .update_btn_box {
        display: flex;
        justify-content: center;
        align-items: center;
        .ant-btn-primary {
          margin-left:20px;
        }
      }
      /deep/.ant-form-item {
        margin-bottom: 0;
        .ant-form-item-label {
          width: 80px;
        }
        .ant-form-item-control-wrapper {
          width: 400px;
          .single_setting_input {
            width: 30%;
          }
        }
      }
      span {
        margin-right: 2%;
      }
      .single_setting_span_left {
        margin-left: 2%;
      }
      .seven_tip {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 1%;
        color: rgba(82, 136, 197);
      }
    }
  }
}
</style>
